<template>
  <div class="se-input-number-container">
    <div class="se-input-number">
      <a-button
        @click="minusClick($event)"
        :disabled="quantity <= 1 ? true : false"
        icon="minus"
        class="minus-button se-input-number__decrease"
      ></a-button>
      <a-button @click="plusClick($event)" icon="plus" class="plus-button se-input-number__increase"></a-button>
      <a-input
        class="se-input"
        :value="quantity"
        :min="1"
        :max="9999"
        @change="handleInputNumberChange($event)"
        @blur="handleInputNumberBlur($event)"
      >
      </a-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InputNumber',
  components: {},
  props: {
    value: {
      type: Number,
      default: undefined,
      require: true,
    },
  },
  data() {
    return {
      quantity: 1,
    }
  },

  model: {
    prop: 'value',
    event: 'input',
  },

  watch: {
    value: {
      handler(newValue) {
        this.quantity = newValue
      },
      immediate: true,
    },

		quantity:{
			handler(newValue){
				this.$emit('input', newValue)
			},
			immediate:true
		}
  },

  mounted() {},
  methods: {
    minusClick(event) {
      if (this.quantity) {
        this.quantity = this.quantity * 1 - 1
        if (this.quantity < 1) {
          this.quantity = 1
        }
      }
    },

    handleInputNumberChange(event) {
      this.quantity = event.target.value
    },

    handleInputNumberBlur(event) {
      this.quantity = event.target.value
      if (this.quantity < 1) {
        this.quantity = 1
      }
    },

    plusClick(event) {
      if (this.quantity) {
        this.quantity = this.quantity * 1 + 1
      }
    },
  },
}
</script>

<style scoped lang="less">

.se-input-number-container {
  display: flex;
  justify-content: center;
}
.se-input-number {
  top: -5px;
  position: relative;
  display: inline-block;
  width: 120px;
  line-height: 30px;
  height: 32px;
}


.se-input-number .se-input {
  display: block;
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
  height: 32px;
  text-align: center;
}

.se-input-number__decrease,
.se-input-number__increase {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  top: 1px;
  width: 32px;
  height: 30px !important;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 13px;
  border: 0px;
}

.se-input-number .minus-button {
  left: 1px;
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #dcdfe6;
}

.se-input-number .plus-button {
  right: 1px;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #dcdfe6;
}
</style>

